<template>
  <div class="baseBox">
    <Card>
      <Form v-model:form="form" :formList="formList" layout="inline" @save="search">
        <template #type>
          <a-select v-model:value="form.type" placeholder="请选择">
            <a-select-option value="2">开启</a-select-option>
            <a-select-option value="1">关闭</a-select-option>
          </a-select>
        </template>
      </Form>
    </Card>
    <Table class="mt_20 flex" :width="1200" :dataSource="list" :columns="columns" :pagination="pagination" @handleChangeList="handleChangeList">
      <template #header>
        <div class="d_f w_100b">
          <a-space>
            <a-button type="primary" @click="openImport">批量导入 </a-button>
            <a-button type="primary" @click="output">导出 </a-button>
            <a-button type="primary" @click="download()">模板下载</a-button>
          </a-space>
          <div class="flex" style="display: flex; justify-content: flex-end">
            <a-button type="primary" @click="add">新增</a-button>
          </div>
        </div>
      </template>
      <template #type="{ value }">
        <!-- 类型 1关闭 2开启 -->
        <span v-if="value == 2" style="color: #2bcdc4">过滤开启</span>
        <span v-if="value == 1" style="color: #ff544c">过滤关闭</span>
      </template>
       <template #user="{ value }">
        <span>{{value?.username}}</span>
      </template>
      <template #action="{ value }">
        <a-space>
          <a-button
            v-if="value.type == 2"
            type="primary"
            @click="videoSwitch(value)"
            >关闭过滤
          </a-button>
          <a-button
            v-if="value.type == 1"
            type="primary"
            @click="videoSwitch(value)"
            >开启过滤
          </a-button>
          <a-popconfirm
            title="是否删除？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="del(value)"
          >
            <a-button type="primary">删除 </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </Table>
    <!-- 新增/修改 -->
  <Edit v-model:visible="editVisible" :tempData="selectInfo" @reload="reload" />
  <!-- 导入 -->
  <Import v-model:visible="importVisible" @reload="reload" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { formList, dataSource, columns } from "./href";
import Card from "@/components/Card";
import Form from "@/components/Form";
import Table from "@/components/Table";
import Edit from "./Edit";
import Import from "./Import";
import { webFilterApi } from "@/api/webfilter";
const app = getCurrentInstance();
const $this = app.appContext.config.globalProperties; //全局变量
const form = ref({});
const list = ref([]);
const selectInfo = ref({});

const editVisible = ref<boolean>(false);
const importVisible = ref(false);

let pagination =ref({
  total: 0,
  current: 1,
  defaultPageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '50', '100']
})
let currentPage = 1;
let pageNum = 10;

onMounted(() => {
  getData();
});
function search() {
  currentPage = 1;
  pagination.value.current = 1;
  getData();
}
async function getData() {
  const result = await webFilterApi.page({
    page: currentPage,
    limit: pageNum,
    ...form.value,
  });
  const { data } = result;
  pagination.value.total = result.total;
  list.value = data;
}
function handleChangeList(e){
  currentPage = e.current //当前页数
  pageNum = e.pageSize //每页显示条数
  pagination.value.current = e.current;
  getData()
}
function add() {
  selectInfo.value = {};
  editVisible.value = true;
}
function edit(item) {
  selectInfo.value = item;
  editVisible.value = true;
}
async function del(item) {
  const { id } = item;
  await webFilterApi.delete({
    id,
  });

  // list.value = list.value.filter((i) => i.id != id);
  reload()
}
function reload() {
  getData();
}

async function videoSwitch(item) {
  const { id, type } = item;
  await webFilterApi.switch({
    id,
  });
  if (type == 1) item.type = 2;
  if (type == 2) item.type = 1;
}
function openImport() {
  importVisible.value = true;
}
function output() {
  webFilterApi.output();
}
function download() {
  $this.$download("webfilterPageImport.xlsx", "网站过滤模板");
}
</script>

<style lang="less" scoped></style>
